VS Code extensie ontwikkeling onder de knie krijgen: Een uitgebreide handleiding voor wereldwijde ontwikkelaars

Visual Studio Code (VS Code) is de favoriete code editor geworden voor miljoenen ontwikkelaars wereldwijd. Zijn populariteit komt voort uit zijn lichtgewicht karakter, krachtige functies en, vooral, zijn uitbreidbaarheid. De mogelijkheid om aangepaste extensies te maken stelt ontwikkelaars in staat om de editor aan te passen aan hun specifieke behoeften, waardoor de productiviteit wordt verhoogd en workflows worden gestroomlijnd. Deze uitgebreide handleiding loodst u door het proces van het maken van uw eigen VS Code extensies, van de eerste installatie tot het publiceren van uw creatie voor de wereld om te gebruiken.

Waarom VS Code extensies ontwikkelen?

Het ontwikkelen van VS Code extensies biedt tal van voordelen, zowel voor individuele ontwikkelaars als voor organisaties:

• Gepersonaliseerde Workflow: Pas de editor aan zodat deze perfect aansluit op uw codeerstijl en projectvereisten.
• Verhoogde Productiviteit: Automatiseer repetitieve taken, integreer met externe tools en stroomlijn uw ontwikkelingsproces.
• Verbeterde Samenwerking: Deel extensies met uw team of de bredere community om workflows te standaardiseren en de codekwaliteit te verbeteren.
• Leren en Ontwikkelen van Vaardigheden: Ervaring opdoen met TypeScript, Node.js en de VS Code API opent nieuwe carrièremogelijkheden.
• Community Bijdrage: Deel uw innovatieve oplossingen met de wereldwijde ontwikkelaarscommunity en draag bij aan het ecosysteem.

Vereisten

Zorg ervoor dat u het volgende hebt geïnstalleerd voordat u begint met het ontwikkelen van extensies:

• Node.js en npm (Node Package Manager): VS Code extensie ontwikkeling is sterk afhankelijk van Node.js. Download en installeer de nieuwste LTS-versie van de officiële Node.js-website. npm wordt automatisch geïnstalleerd met Node.js.
• Visual Studio Code: Zorg ervoor dat u de nieuwste versie van VS Code hebt geïnstalleerd.
• Yeoman en de VS Code extensie generator: Yeoman is een scaffolding tool die het proces van het maken van extensies vereenvoudigt. Installeer het globaal met behulp van npm:

            npm install -g yo generator-code
            

              
                Copy
              
            
          

Uw ontwikkelomgeving instellen

Met de vereisten op hun plaats, bent u klaar om uw ontwikkelomgeving in te stellen:

1. Maak een nieuw extensieproject: Open uw terminal en voer de volgende opdracht uit om de extensie generator te starten:

            yo code
            

              
                Copy
              
            
          

2. Beantwoord de Prompts: De generator zal een reeks vragen stellen over uw extensie. Hier is een overzicht van veelvoorkomende prompts en aanbevolen antwoorden:
   • Welk type extensie wilt u maken? Kies "Nieuwe extensie (TypeScript)" voor een TypeScript-gebaseerde extensie, wat de aanbevolen aanpak is.
   • Wat is de naam van uw extensie? Kies een beschrijvende en unieke naam voor uw extensie. Voorbeelden: "Code Spell Checker", "JavaScript Snippets", "Python Autocomplete."
   • Wat is de identificatie van uw extensie? Dit is een unieke identificatie voor uw extensie, meestal in de vorm `publisher.extension-name`. Kies een uitgeversnaam (bijv. uw GitHub-gebruikersnaam of bedrijfsnaam).
   • Wat is de beschrijving van uw extensie? Geef een beknopte en informatieve beschrijving van wat uw extensie doet.
   • Een git repository initialiseren? Kies "Ja" om een Git repository te initialiseren voor versiebeheer.
   • Wilt u eslint gebruiken om de code te linten? Kies "Ja" om consistentie in de code stijl af te dwingen.
3. Open het Project in VS Code: Zodra de generator is voltooid, opent u de nieuw gemaakte projectmap in VS Code.

De projectstructuur begrijpen

De extensie generator maakt een basisprojectstructuur met de volgende belangrijke bestanden:

• `package.json`: Dit bestand bevat metadata over uw extensie, inclusief de naam, versie, beschrijving, afhankelijkheden en activeringsgebeurtenissen.
• `tsconfig.json`: Dit bestand configureert de TypeScript compiler.
• `.vscode/launch.json`: Dit bestand configureert de debugger voor uw extensie.
• `src/extension.ts`: Dit is het belangrijkste toegangspunt voor uw extensie. Het bevat de functies `activate` en `deactivate`.
• `README.md`: Een markdown bestand met een beschrijving van uw extensie, hoe deze te gebruiken en alle relevante informatie.

Uw eerste extensie schrijven

Laten we beginnen met het maken van een eenvoudige extensie die een "Hello World" bericht weergeeft wanneer een opdracht wordt uitgevoerd:

1. Open `src/extension.ts`: Dit bestand bevat de functie `activate`, die wordt aangeroepen wanneer uw extensie is geactiveerd.
2. Wijzig de `activate` functie: Vervang de bestaande code door het volgende:

            import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
	console.log('Congratulations, your extension \"my-extension\" is now active!');

	let disposable = vscode.commands.registerCommand('my-extension.helloWorld', () => {
		vscode.window.showInformationMessage('Hello World from My Extension!');
	});

	context.subscriptions.push(disposable);
}

export function deactivate() {}
            

              
                Copy
              
            
          

3. Uitleg:
   • `vscode.commands.registerCommand('my-extension.helloWorld', ...)`: Registreert een opdracht met de ID `my-extension.helloWorld`. Deze opdracht is beschikbaar in het VS Code command palette.
   • `vscode.window.showInformationMessage('Hello World from My Extension!')`: Toont een informatiemelding in het VS Code venster.
   • `context.subscriptions.push(disposable)`: Voegt de opdracht toe aan de abonnementen van de extensie, zodat deze op de juiste manier wordt verwijderd wanneer de extensie wordt gedeactiveerd.
4. Wijzig `package.json`: Voeg het volgende toe aan de sectie `contributes` om de opdracht te definiëren:

            "contributes": {
		"commands": [{
			"command": "my-extension.helloWorld",
			"title": "Hello World"
		}]
	}
            

              
                Copy
              
            
          

5. Uitleg:
   • `"commands"`: Definieert de opdrachten die uw extensie bijdraagt.
   • `"command": "my-extension.helloWorld"`: Specificeert de opdracht ID die overeenkomt met de ID die wordt gebruikt in `extension.ts`.
   • `"title": "Hello World"`: Stelt de weergavenaam in voor de opdracht in het command palette.

Uw extensie testen

Nu is het tijd om uw extensie te testen:

1. Druk op F5: Dit start een nieuw VS Code venster met uw extensie geïnstalleerd. Dit is de "Extension Development Host".
2. Open het Command Palette: Druk op `Ctrl+Shift+P` (of `Cmd+Shift+P` op macOS) om het command palette te openen.
3. Typ "Hello World": U zou uw opdracht in het command palette moeten zien.
4. Selecteer "Hello World": Als u op de opdracht klikt, wordt deze uitgevoerd en wordt het bericht "Hello World" weergegeven in het VS Code venster.

Uw extensie debuggen

Debuggen is cruciaal voor het identificeren en oplossen van problemen in uw extensie. VS Code biedt uitstekende debugging ondersteuning:

1. Breekpunten instellen: Klik in de editorgoot naast de regelnummers om breekpunten in uw code in te stellen.
2. Druk op F5: Dit start de Extension Development Host in de debug modus.
3. Activeer uw extensie: Voer de opdracht of actie uit die de code activeert die u wilt debuggen.
4. Variabelen en aanroepstack inspecteren: De VS Code debugger pauzeert de uitvoering bij uw breekpunten, zodat u variabelen kunt inspecteren, stapsgewijs door de code kunt lopen en de aanroepstack kunt onderzoeken.

Werken met de VS Code API

De VS Code API biedt een uitgebreide set interfaces en functies voor interactie met de editor. Hier zijn enkele belangrijke gebieden van de API:

• `vscode.window`: Voor interactie met het VS Code venster, het weergeven van berichten, het tonen van invoervelden en het beheren van panelen.
• `vscode.workspace`: Voor toegang tot en manipulatie van de werkruimte, inclusief bestanden, mappen en configuratie-instellingen.
• `vscode.commands`: Voor het registreren en uitvoeren van opdrachten.
• `vscode.languages`: Voor het bieden van taalondersteuning, zoals syntax markering, code aanvulling en diagnostics.
• `vscode.debug`: Voor interactie met de debugger.
• `vscode.scm`: Voor interactie met source control management systemen zoals Git.

Voorbeeld: Een code snippet extensie maken

Laten we een extensie maken die een code snippet toevoegt voor het maken van een basis React component:

1. Maak een `snippets` map: Maak een nieuwe map met de naam `snippets` in de root van uw project.
2. Maak een snippet bestand: Maak een bestand met de naam `react.json` in de map `snippets`.
3. Voeg de snippet definitie toe: Voeg de volgende JSON toe aan `react.json`:

            {
	"React Component": {
		"prefix": "reactcomp",
		"body": [
			"import React from 'react';",
			"",
			"interface Props {\n\t[key: string]: any;\n}",
			"",
			"const ${1:ComponentName}: React.FC = (props: Props) => {\n\treturn (\n\t\t
\n\t\t\t${2:Content}\n\t\t
\n\t);\n};",
			"",
			"export default ${1:ComponentName};"
		],
		"description": "Creates a basic React component"
	}
}
            

              
                Copy
              
            
          

4. Uitleg:
   • `"React Component"`: De naam van de snippet.
   • `"prefix": "reactcomp"`: Het prefix dat de snippet activeert. Als u `reactcomp` typt en op `Tab` drukt, wordt de snippet ingevoegd.
   • `"body"`: Een array van strings die de coderegels in de snippet voorstellen.
   • `${1:ComponentName}`: Een tab stop waarmee u snel de componentnaam kunt wijzigen.
   • `"description"`: Een beschrijving van de snippet.
5. Wijzig `package.json`: Voeg het volgende toe aan de sectie `contributes`:

            "contributes": {
		"snippets": [{
			"language": "javascriptreact",
			"path": "./snippets/react.json"
		}]
	}
            

              
                Copy
              
            
          

6. Uitleg:
   • `"snippets"`: Definieert de snippets die uw extensie bijdraagt.
   • `"language": "javascriptreact"`: Specificeert de taal waarop de snippet van toepassing is.
   • `"path": "./snippets/react.json"`: Specificeert het pad naar het snippet bestand.
7. Test uw snippet: Open een `.jsx` of `.tsx` bestand en typ `reactcomp`. Druk op `Tab` om de snippet in te voegen.

Geavanceerde technieken voor extensie ontwikkeling

Zodra u de basisprincipes onder de knie hebt, kunt u meer geavanceerde technieken voor extensie ontwikkeling verkennen:

• Language Server Protocol (LSP): Gebruik LSP om geavanceerde taalondersteuning te bieden, zoals code aanvulling, diagnostics en refactoring, voor een specifieke taal. Populaire LSP implementaties zijn onder andere die voor Python, Java en Go.
• Debugging Adapters: Maak aangepaste debugging adapters om debugging van specifieke programmeertalen of runtimes te ondersteunen.
• Webviews: Sluit interactieve web-gebaseerde UI's in VS Code in met behulp van webviews. Hierdoor kunt u complexe en visueel aantrekkelijke extensies maken.
• Theming: Maak aangepaste thema's om het uiterlijk van VS Code te wijzigen. Veel populaire thema's zijn beschikbaar op de VS Code Marketplace.
• Keybindings: Definieer aangepaste keybindings om specifieke acties toe te wijzen aan sneltoetsen.

Internationalisatie en Lokalisatie (i18n en L10n)

Om een wereldwijd publiek te bereiken, kunt u overwegen uw extensie te internationaliseren en te lokaliseren. Dit omvat het aanpassen van uw extensie om verschillende talen en regio's te ondersteunen.

• Externaliseer Strings: Verplaats alle strings die voor de gebruiker zichtbaar zijn naar afzonderlijke resourcebestanden.
• Gebruik VS Code's i18n API: VS Code biedt API voor het laden van gelokaliseerde strings op basis van de locale van de gebruiker.
• Ondersteun meerdere talen: Zorg voor resourcebestanden voor verschillende talen.
• Overweeg Right-to-Left (RTL) Layout: Als uw extensie tekst weergeeft, zorg er dan voor dat deze RTL-talen zoals Arabisch en Hebreeuws ondersteunt.

Uw extensie publiceren

Zodra uw extensie klaar is, kunt u deze publiceren naar de VS Code Marketplace zodat anderen deze kunnen gebruiken:

1. Maak een Azure DevOps Organisatie: U hebt een Azure DevOps organisatie nodig om uw extensie te publiceren. Als u er geen heeft, maak dan een gratis account op de Azure DevOps website.
2. Installeer de `vsce` tool: De VS Code Extension Manager (`vsce`) is een command-line tool voor het verpakken en publiceren van extensies. Installeer het globaal met behulp van npm:

            npm install -g vsce
            

              
                Copy
              
            
          

3. Maak een Uitgever: Een uitgever is een identiteit die eigenaar is van uw extensies op de Marketplace. Maak een uitgever met behulp van de opdracht `vsce create-publisher`. U moet een uitgeversnaam en een personal access token (PAT) van Azure DevOps opgeven.
4. Genereer een Personal Access Token (PAT): Ga in Azure DevOps naar "User Settings" -> "Personal Access Tokens" en maak een nieuwe PAT met het bereik "Marketplace (Publish)".
5. Verpak uw extensie: Gebruik de opdracht `vsce package` om uw extensie te verpakken in een `.vsix` bestand.
6. Publiceer uw extensie: Gebruik de opdracht `vsce publish` om uw extensie naar de Marketplace te publiceren. U moet uw uitgeversnaam en uw PAT opgeven.

Best practices voor extensie ontwikkeling

Volg deze best practices om hoogwaardige en onderhoudbare VS Code extensies te maken:

• Gebruik TypeScript: TypeScript biedt statische typen en verbetert de onderhoudbaarheid van de code.
• Schrijf Unit Tests: Schrijf unit tests om ervoor te zorgen dat uw extensie correct functioneert.
• Gebruik een Linter: Gebruik een linter zoals ESLint om consistentie in de code stijl af te dwingen.
• Documenteer uw code: Schrijf duidelijke en beknopte documentatie voor uw extensie.
• Behandel fouten op een elegante manier: Implementeer de juiste foutafhandeling om te voorkomen dat uw extensie crasht.
• Optimaliseer de prestaties: Optimaliseer de prestaties van uw extensie om te voorkomen dat VS Code trager wordt.
• Volg de VS Code API Richtlijnen: Houd u aan de VS Code API richtlijnen om ervoor te zorgen dat uw extensie goed integreert met de editor.
• Overweeg toegankelijkheid: Maak uw extensie toegankelijk voor gebruikers met een beperking.

Community bronnen

Hier zijn enkele waardevolle bronnen om meer te leren over VS Code extensie ontwikkeling:

• VS Code Extension API Documentatie: De officiële documentatie voor de VS Code Extension API.
• VS Code Extension Voorbeelden: Een verzameling voorbeelden van extensies die verschillende functies van de API demonstreren.
• VS Code Marketplace: Blader door de VS Code Marketplace om bestaande extensies te vinden en van hun code te leren.
• Stack Overflow: Stel vragen en vind antwoorden met betrekking tot VS Code extensie ontwikkeling.
• GitHub: Verken open-source VS Code extensies en draag bij aan de community.

Conclusie

Het ontwikkelen van VS Code extensies is een krachtige manier om uw codeeromgeving aan te passen, de productiviteit te verhogen en uw oplossingen te delen met de wereldwijde ontwikkelaarscommunity. Door deze uitgebreide handleiding te volgen, kunt u de kunst van het ontwikkelen van extensies onder de knie krijgen en innovatieve tools maken die de VS Code ervaring voor uzelf en anderen verbeteren. Vergeet niet om de community te omarmen, bij te dragen aan open-source projecten en continu te leren en de steeds evoluerende wereld van VS Code extensie ontwikkeling te verkennen. Veel succes en happy coding!